"use strict";

var device_select = document.getElementsByClassName('device');

var audioplay = document.getElementsByClassName('audioplay')[0];
var videoplay = document.getElementsByClassName('videoplay')[0];
var constraints_div = document.getElementsByClassName('constraints')[0];

var filter_select = document.getElementsByClassName('filter')[0];

var snapshot = document.getElementsByClassName('snapshot')[0];
var picture = document.getElementsByClassName('picture')[0];
picture.width = 320;
picture.height = 240;

// 获取媒体设备
function gotDevices(deviceInfos) {
    deviceInfos.forEach(function(deviceInfo){
        var option = document.createElement('option');
        option.text =deviceInfo.label;
        option.value  =deviceInfo.deviceId;

        switch (deviceInfo.kind) {
            case "audioinput":
                device_select[0].appendChild(option);
                break;
            case "audiooutput":
                device_select[1].appendChild(option);
                break;
            case "videoinput":
                device_select[2].appendChild(option);
                break;
        }

        // console.log(
        //     deviceInfo.kind + ": label = " +
        //     deviceInfo.label + ": id = " +
        //     deviceInfo.deviceId + ": groupId = " +
        //     deviceInfo.groupId
        //     );
    });
}

// 获取音频或视频相关数据
function gotMediaStream(stream) {
    videoplay.srcObject = stream;

    var videoTrack = stream.getVideoTracks()[0];
    var videoConstraints = JSON.stringify(videoTrack.getSettings(), null, 4);
    constraints_div.textContent = videoConstraints;

    // audioplay.srcObject = stream;
    return navigator.mediaDevices.enumerateDevices();
}

// 错误处理
function handleError(err) {
    console.log(err.name + " : " + err.message);
}

function start() {
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        console.log("getUserMedia is not supported");
        return;
    }else{
        var deviceId = device_select.value;
        var constraints = {
            video: {
                width: 540,
                height: 400,
                frameRate: 15, // 帧
                facingMode: 'enviroment', // user:前置, enviroment后置, left:前置左侧, right:前置右侧
                deviceId : deviceId ? {exact: deviceId} : undefined
            },
            // video: false,
            // audio: {
            //     echoCancellation: true, // 回音消除
            //     noiseSuppression: true, // 降噪
            // },
            audio: false,
        }
        navigator.mediaDevices.getUserMedia(constraints)
            .then(gotMediaStream)
            .then(gotDevices)
            .catch(handleError);
    }
}

start();
device_select[2].onchange = start;

// 切换视频特效
filter_select.onchange = function() {
    videoplay.className = filter_select.value;
}

// 获取当前图片
snapshot.onclick = function() {
    picture.className = filter_select.value;
    picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
}
